<template>
	<view style="height: 100vh;position: relative;width:100%;overflow:hidden">
		<nav-bar :isCenter="true" :title="'工厂地图'" :bold="true" :size="36" @back="goBack"></nav-bar>
		<!-- <view class="region_loading" v-if="isMove && loading">
			<view class="rl_box"><zero-loading type="radar" position="absolute"></zero-loading></view>
		</view> -->
		<view v-if="isAuth_location">
			<!-- 			<view class="post"
				style="background:#fff;height:60rpx;line-height: 60rpx;top:0;font-size:26rpx;text-align:center">
				共{{total_all}}家工厂,展示 <text style="color:#0F50C6">{{showLength}}</text>家
			</view> -->
			<view class="" v-if="tab_list">
				<view class="post" :style="'top:60rpx;'" style="z-index: 100;">
					<ul class="df ac bgcf bbf1">
						<block style="flex:1">
							<block v-for="(item, index) in tab_list" :key="index">
								<li class="df ac jc h44 w50" @tap.native="ontabShow(index)" :data-i="index"
									style="width: 180rpx;">
									<P :class="'f14 ' + (item.show ? 'c10' : 'c6b')" class="tabListName">{{ item.name }}
									</P>
									<image class="down ml8" referrerPolicy='no-referrer'
										:src="item.show ? 'https://wx.xtwaixie.com/img/down1.png' : 'https://wx.xtwaixie.com/img/down.png'" />
								</li>
							</block>
						</block>
						<li @click="goList" class="f12 change-map tc" style="width:21%;margin-right:20rpx">切换列表模式</li>
					</ul>
				</view>
			</view>

			<map id="myMap" :style="'width:100%;height:100vh;position: absolute;top:0rpx;left:0;'"
				:longitude="longitude" :latitude="latitude" :controls="controls" :scale="map_scale" :markers="mapList"
				show-location @regionchange="regionchange" @markertap="markertap" :zIndex="-1" @callouttap="markertap">
				<cover-view slot="callout" v-if="map_range==0">
					<cover-view v-for="(item,index) in mapList" :marker-id="item.id" :key="index">
						<cover-view
							:class="detail.id == item.id ? 'customCallout_active customCallout' : 'customCallout'"
							:key="index" :marker-id="item.id" v-show="item.showLabel">
							<cover-view
								:class="detail.id == item.id? 'marker-box-text-active marker-box-texts f13' : 'marker-box-texts f13'"
								style="margin-bottom:15rpx;">
								<cover-view class="van-ellipsis">
									{{item.options.labelName}}
								</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
				<!-- -->
				<cover-view slot="callout" v-else>
					<template v-for="(item,index) in mapList">
						<!--   -->
						<cover-view :key="index" :marker-id="item.id" class="customCallout">
							<!-- <cover-view
								style="text-align:center;font-size: 28rpx;color:#fbfbfd">{{item.options.labelName}}</cover-view> -->
							<cover-view
								style="text-align:center;font-size: 20rpx;color:#fbfbfd;background:#0F50C6;padding:10rpx 16rpx;border-radius: 40rpx;">{{item.count}}家</cover-view>
						</cover-view>
					</template>
				</cover-view>
				<cover-image v-show="isMove" class="manpCenter" :src="map_center_icon"></cover-image>
			</map>
			<!-- not_join -->
			<view class="factory_position" v-show="not_join">
				<view class="factory_entry" @click="goPage('/pages/settled/setPage')">
					<view>
						<image style="width:45rpx" :src="getImgSrc('/uploads/20241030/17302581996721a5175c027.png')"
							mode="widthFix" />
					</view>
					<view>工厂入驻</view>
				</view>
				<view class="cross" @click.stop="not_join = false">
					<van-icon name="cross" size="20" color="#1050c7" />
				</view>
			</view>
			<view class="factory_map_area" :style="'bottom:' + bottom + 10 + 'rpx;'">
				<view class="locate_box" @click="getLocate">
					<view class="">
						<image style="width:58rpx;"
							src="https://cdn.xtwaixie.com/uploads/20240927/172741089866f632d217efe.png" mode="widthFix">
						</image>
					</view>
					<view class="f12" style="text-align: center;">
						定位
					</view>
				</view>


				<view class="swiperBox pr">
					<view class="page_turning_box_left df ac" @click.stop="changePre" v-show="current!=0 && !loading">
						<van-icon name="arrow-left" color="white" size="40rpx" />
					</view>
					<view class="page_turning_box df ac" @click.stop="changeNext"
						v-show="markers.length > 0 && !loading">
						<van-icon name="arrow" color="white" size="40rpx" />
					</view>
					<swiper class="" :autoplay="false" @change="changeCrad" v-show="!loading && markers.length > 0"
						:current="current"
						:style="hasProducts(detail.machining_products) ? 'min-height:430rpx;transition:height 0.3s;' : 'min-height:300rpx;transition:height 0.3s;'">
						<swiper-item v-for="(item, index) in markers" :key="index">
							<view class="swiper-item " :class="'swiper-item' + index"
								style="height:100%;padding: 0rpx 30rpx 10rpx;box-sizing:boder-box">
								<view calss='bgcf'
									:style="{minHeight: hasProducts(detail.machining_products) ? '430rpx' : '300rpx'}"
									style="width:100%;background:#fff;border-radius: 20rpx;height: 300rpx;">
									<view class="factory_box bgcf"
										@click="goPage('/subPack/factoryDetails/factoryDetails',item.uid)">
										<view class="df sb">
											<view
												:class="item.doorboard != '' && item.doorboard ? 'factory_img' : 'factory_img df ac jc fc'">
												<view class="" style="width: 100%;height:100%;"
													v-if="item.doorboard != '' && item.doorboard">
													<image :src="getImgSrc(item.doorboard)" mode="aspectFill">
													</image>
													<view class=""
														style="position: absolute;left: 10rpx;top: 10rpx;width: 100rpx;height: 36rpx;">
														<image
															style="position: absolute;left: 0rpx;top: 1rpx;width: 100rpx;border-radius: 0rpx;"
															src="@/static/icon/rzns_icon.png" mode="widthFix"></image>
														<view class="factory_year">
															入驻{{ item.year }}年
														</view>
													</view>
												</view>
												<view class="" v-else>
													<view class="df jc">
														<image style="width:80rpx;"
															:src="getImgSrc('/uploads/20241023/17296638126718934463b45.png')"
															mode="widthFix"></image>
													</view>
													<view class="mt10" style="color:#BBBBBB;">未上传形象照</view>
												</view>
											</view>
											<view class="factory_content">
												<h2 class="f16 c28 f600 factory_title" style="font-size: 32rpx;">
													{{ item.company }}
												</h2>
												<view class="df ac mt5 sb" style="width: 100%;">
													<view class="df ac"
														v-if="item.longitude && item.latitude && item.latitude != '0' && item.longitude != 0">
														<view class="df ac " style="transform: translateY(3rpx);">
															<uni-icons type="location" color="#1050c7"
																size="22"></uni-icons>

														</view>
														<view class="f14 c10">
															距您{{ item.distance_in_km}}{{item.unit}}
														</view>
													</view>
												</view>
												<view class="df ac">
													<!-- 至尊会员 -->
													<view class="df ac mr10"
														v-if="item.grade === 2 && item.grade_type === 1">
														<image style="height: 38rpx;max-width: 180rpx;"
															:src="getImgSrc('/uploads/20250228/174070970167c11f451f7ad.png')"
															mode="heightFix"></image>
													</view>
													<!-- 基础会员 -->
													<view class="df ac mr10"
														v-if="item.grade === 2 && item.grade_type === 0">
														<image style="height: 38rpx;max-width: 180rpx;"
															:src="getImgSrc('/uploads/20250228/174070968667c11f3636140.png')"
															mode="heightFix"></image>
													</view>
													<view class="df ac" v-if="item.state === 1">
														<image style="height: 55rpx;max-width: 140rpx;"
															src="@/static/icon/gsrz_icon.png" mode="heightFix"></image>
													</view>
												</view>
												<view class="df ac" style="width: 100%;">
													<view class="factory_content_name f14">工艺：</view>
													<view class="factory_content_text f14">
														{{ item.machining ? item.machining : '--' }}
													</view>
												</view>
												<view class="mt5 f14"
													style="width: 100%;color:gray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display:flex;align-items:center;justify-content:center">
													<view
														style="display:flex;flex-direction: column;width:50%;text-align:center;border-right:1px solid #D1D1D1;">
														<view>员工数：</view>
														<view class="f13">{{ item.staff ? item.staff : '--' }}</view>
													</view>
													<view
														style="display:flex;flex-direction: column;width:50%;text-align:center">
														<view>工厂面积：</view>
														<view class="f13">
															{{ item.annual_output_value ? item.annual_output_value : '--'}}
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="factory_img_box df mt10"
											v-if="hasProducts(detail.machining_products)">
											<view class="factory_img_item mr10" style="margin-right: 22rpx;"
												v-for="(product,idx) in item.machining_products.slice(0,4)" :key="idx">
												<image v-if="checkType(product.url)" :src="getImgSrc(product.url[0])"
													mode="aspectFill">
												</image>
												<image v-else :src="getImgSrc(product.url)" mode="aspectFill">
												</image>
											</view>
										</view>
									</view>
								</view>
								<view v-show="loading" style="padding:0rpx 30rpx; box-sizing: border-box;">
									<view class="skeleton">
										<view class="row df ac sb">
											<view class="skeleton_left"></view>
											<view class="skeleton_right">
												<view class="skeleton_title"></view>
												<view class="skeleton_content1"></view>
												<view class="skeleton_content2"></view>
												<view class="skeleton_content3"></view>
											</view>
										</view>
										<view class="row">
											<view class="skeleton_products df ac sb">
												<view class="skeleton_products_item" v-for="(item,index) in 4"
													:key="index"></view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<!-- <view v-show="loading || markers.length == 0" calss="skeleton " style="padding:30rpx 0rpx;min-height:425rpx;">
						{{ markers.length }}
						<van-skeleton avatar title row="4" />
					</view> -->
					<view v-show="loading" style="padding:0rpx 30rpx; box-sizing: border-box; min-height:430rpx;">
						<view class="skeleton">
							<view class="row df ac sb">
								<view class="skeleton_left"></view>
								<view class="skeleton_right">
									<view class="skeleton_title"></view>
									<view class="skeleton_content1"></view>
									<view class="skeleton_content2"></view>
									<view class="skeleton_content3"></view>
								</view>
							</view>
							<view class="row">
								<view class="skeleton_products df ac sb">
									<view class="skeleton_products_item" v-for="(item,index) in 4" :key="index"></view>
								</view>
							</view>
						</view>
					</view>
					<view v-show="!loading && markers.length == 0"
						style="padding:0rpx 30rpx; box-sizing: border-box; min-height:300rpx;">
						<view v-show="!loading && markers.length == 0" class="fa_emity tc f600 f20">
							附近暂无工厂
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-else class="unLocation">
			<image style="width:100%;height:100vh" :src="getImgSrc('/uploads/20241028/1730100904671f3ea8bfb89.jpg')"
				mode="aspectFill"></image>
			<view class="unAuth_info">
				<view class="">
					为保证功能正常使用，请先打开位置服务
				</view>
				<view class="openSet" @click="openSet">
					打开
				</view>
				<view class="f14" style="width: 250rpx;margin: 0rpx auto;text-align: left;">
					1.点击【位置信息】
				</view>
				<view class="f14" style="width: 250rpx;margin: 5rpx auto;text-align: left;">
					2.选择“允许”
				</view>
			</view>
		</view>
		<van-popup :show="screen_popup" @close="closePopup" position="top">
			<view class="" :style="'padding-top:' + (navTop * 2 + 90) + 'rpx;'">
				<ul class="df ac bgcf bbf1">
					<block v-for="(item, index) in tab_list" :key="index">
						<li class="df ac jc h44 w50" @tap.native="ontabSel($event, { i: index })" :data-i="index"
							style="width: 250rpx;">
							<P :class="'f14 ' + (item.show ? 'c10' : 'c6b')" class="tabListName">{{ item.name }}</P>
							<image class="down ml8" referrerPolicy='no-referrer'
								:src="item.show ? 'https://wx.xtwaixie.com/img/down1.png' : 'https://wx.xtwaixie.com/img/down.png'" />
						</li>
					</block>
				</ul>
				<view class="" style="display: flex;" v-if="tab_list[0].show">
					<view class="position_screen">
						<view class="mt10">
							当前位置
						</view>
						<view class="position_list df mt20">
							<view
								:class="screen_index[0] == index ? 'position_item_active position_item' : 'position_item'"
								:style="index == 0 ? '' : 'line-height:65rpx'" @click="changeScreen(0,index)"
								v-for="(item,index) in position_screen" :key="index">
								<view class="">
									{{ item == 0 ? '附近' : item + '公里' }}
								</view>
								<view class="f12" v-if="item == 0"
									:style=" screen_index[0] == index ? 'color:#4874CB;' : 'color:gray'">
									智能范围
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="h360" style="display: flex;" v-if="tab_list[1].show">
					<scroll-view class="h360 bgcf7" :scroll-y="true" style="width: 250rpx;">
						<ul class="db">
							<block v-for="(item, index) in info.machiningre" :key="index">
								<li class="pd015 h48 df ac sb" :class="{bgcf:screen_index[1] == index}"
									@tap.native="changeTab(index,item.id,item.name)">
									<p :class="'f14 c28 ' + (screen_index[1] == index ? 'c10' : '')">{{ item.name }}
									</p>
								</li>
							</block>
						</ul>
					</scroll-view>
				</view>
				<view class="df" v-if="tab_list[2].show">
					<scroll-view class="h360 w125 bgcf7" :scroll-y="true">
						<ul class="db">
							<block v-for="(item, index) in province_list" :key="index">
								<li :class="'tab-left ' + (region[0].act === item.region_id ? 'bgcf' : '')"
									@tap.native="onRegion($event, { name: item.region_name, id: item.region_id, type: 0 })"
									:data-name="item.region_name" :data-id="item.region_id" :data-type="0">
									<p :class="'f14 c28 ovh w110 ' + (region[0].act === item.region_id ? 'c10' : '')">
										{{ item.region_name }}
									</p>
								</li>
							</block>
						</ul>
					</scroll-view>
					<scroll-view class="h360 f1" :scroll-y="true">
						<ul class="db">
							<block v-for="(item, index) in city_list" :key="index">
								<li class="pd015 h48 df ac sb"
									@tap.native="onRegion($event, { name: item.region_name, id: item.region_id, type: 1 })"
									:data-name="item.region_name" :data-id="item.region_id" :data-type="1">
									<p :class="'f14 c28 ' + (region[1].act === item.region_id ? 'c10' : '')">
										{{ item.region_name }}
									</p>
									<image class="sel" src="https://wx.xtwaixie.com/img/sel.png"
										v-if="region[1].act === item.region_id" />
								</li>
							</block>
						</ul>
					</scroll-view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import NavBar from '@/component/nav-bar.vue';
	import http from '../../utils/http';
	const app = getApp();
	let debounceTimeout;
	export default {
		components: {
			NavBar,
		},
		data() {
			return {
				not_join: true,
				currentLength: 0,
				loading: true,
				current: 0,
				detail: {
					doorboard: "",
					id: "",
					distance_in_km: 0,
					userSettledInfo: {
						main_products: ""
					}
				},
				markerId: '',
				navTop: 0,
				bottom: 0,
				nav_title: '',
				latitude: 0,
				longitude: 0,
				my_longitude: 0,
				my_latitude: 0,
				map_scale: 17,
				map_scale_watch: 17,
				controls: [{
					id: 1,
					// iconPath: 'https://cdn.xtwaixie.com/uploads/20240925/172723812766f38fef41cdd.png',
					// position: {
					// 	left: 0,
					// 	top: 300 - 50,
					// 	width: 50,
					// 	height: 50
					// },
					clickable: true
				}],
				mapList: [], //存放地图的展示数据
				markers: [],
				other_markers: [],
				tab_list: [{
						show: false,
						name: '距离',
						act: ''
					},
					{
						show: false,
						name: '工艺',
						act: ''
					},
					{
						show: false,
						name: '地区',
						act: '',
					}
				],
				region: [{
					name: '',
					act: ''
				}, {
					name: '',
					act: ''
				}, {
					name: '',
					act: ''
				}],
				screen_popup: false,
				screen_index: [-1, 0, -1],
				position_screen: [0, 5, 20, 50, 100],
				province_list: [],
				province_text: '',
				city_list: [],
				info: [],
				isAuth_location: true,
				list: [],
				currentIndex: 0,
				page: 1,
				pageSize: 1,
				is_simple: false,
				total_all: 0,
				showLength: 0,
				totalLatitude: 0,
				totalLongitude: 0,
				pre_id: "",
				current_map_icon: "",
				map_icon: "",
				isclick: false,
				is_onLoad: false,
				isMove: false,
				map_center_icon: '',
				map_range: 0, //缩放的范围，0，200公里，500公里
				// flag: 0,
				cityList: [], //市列表
				economizeList: [], //省列表
			};
		},
		mounted() {
			const mapContext = uni.createMapContext('myMap', this);
			this.mapContext = mapContext;
			this.map_center_icon = this.getImgSrc('/uploads/20241217/17344018356760df2be17e8.png')

			// this.changeCrad = debounce(this.changeCrad, 300);
		},
		async onLoad(opt) {
			// this.getSystemInfoSync()
			this.is_onLoad = true
			setTimeout(() => {
				this.is_onLoad = false
			}, 3000)
			this.setData({
				navTop: app.globalData.navTop
			});
			const {
				latitude,
				longitude,
				my_longitude,
				my_latitude,
				id
			} = opt
			this.current_map_icon = this.getImgSrc(
				'/uploads/20241023/172966259367188e81d9230.png'
			)
			this.map_icon = this.getImgSrc(
				'/uploads/20240925/172723812766f38fef41cdd.png')
			this.pre_id = id
			this.my_longitude = my_longitude
			this.my_latitude = my_latitude
			this.latitude = latitude
			this.longitude = longitude
			this.getArea(latitude, longitude)
			this.getBase()
			this.getRegion(1)
			uni.removeStorageSync('factoryLocal')
			this.getCityList()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			const that = this

			this.getAllInfo()
			let factoryLocal = uni.getStorageSync('factoryLocal')
			if (factoryLocal && !this.is_onLoad) {
				factoryLocal = JSON.parse(factoryLocal)
				setTimeout(() => {
					this.latitude = factoryLocal.lat
					this.longitude = factoryLocal.lng
				}, 1000)
			}
		},
		watch: {
			isMove(n, o) {
				if (n) {

				}
			},
			map_range(nval) {
				if (nval == 0) {
					this.setMapList(this.markers)
				} else if (nval == 200) {
					this.setMapList(this.cityList)
				} else if (nval == 500) {
					this.setMapList(this.economizeList)
				}
			},
			map_scale(nval) {
				this.map_scale_watch = nval
			},
			// 手动调整地图用的这个
			map_scale_watch(nval) {
				console.log(nval)
				if (nval <= 5) { //省
					if (this.map_range != 500) {
						this.map_range = 500
					}
				} else if (nval <= 8) { //市
					// nval > 4 && 
					if (this.map_range != 200) {
						this.map_range = 200
					}
				} else {
					if (this.map_range != 0) {
						this.map_range = 0
					}
				}

				if (nval <= 8) {
					this.markers.forEach((item, index) => {
						const is_svip = item.grade === 2 && item.grade_type === 1
						const is_show = this.tab_list[0].act != '' && this.tab_list[0].act >= 100 ? is_svip : true
						if (item.id == this.detail.id || is_show) {
							item.width = item.id == this.detail.id ? 35 : 25
							item.height = item.id == this.detail.id ? 35 : 25
							item.iconPath = item.id == this.detail.id ? this.current_map_icon : this.map_icon
							item.showLabel = true
						} else {
							item.width = 25
							item.height = 25
							item.iconPath = this.map_icon
							item.showLabel = false
						}
					})
				} else {
					this.markers.forEach((item, index) => {
						const is_svip = item.grade === 2 && item.grade_type === 1
						const is_show = this.tab_list[0].act != '' && this.tab_list[0].act >= 100 ? is_svip : true
						if (item.id == this.detail.id) {
							item.width = 35
							item.height = 35
							item.iconPath = this.current_map_icon
							item.showLabel = true
						} else {
							item.width = 25
							item.height = 25
							item.iconPath = this.map_icon
							item.showLabel = is_show
						}
					})
				}
			},
			// current(n, o) {
			// 	if (n) {
			// 		this.markers.forEach((item, index) => {
			// 			item.width = 30
			// 			item.height = 30
			// 			item.iconPath = this.map_icon
			// 			if (n === index) {
			// 				item.width = 40
			// 				item.height = 40
			// 				item.iconPath = this.current_map_icon
			// 			}
			// 		})
			// 	}
			// }
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {

			// 获取省/市的总数和名称
			getCityList() {
				http.request('user_settled/count', {
					type: 1
				}).then(res => {
					let data = res.data
					this.cityList = this.setCityArrList(data[0], 0)
					this.economizeList = this.setCityArrList(data[1], 1)
					if (this.map_range == 200) {
					this.setMapList(this.cityList)
					} else if (this.map_range == 500) {
						this.setMapList(this.economizeList)
					}
				})
			},
			setMapList(list) {
				this.mapList = []
				setTimeout(res => {
					this.mapList = list
				}, 100)
			},
			setCityArrList(data, type) {
				let list = []
				data.forEach(item => {
					list.push({
						id: Math.floor(Math.random() * (9999999 - 1000000 + 1)) + 1000000,
						...item,
						count: type == 1 ? item.province_count : item.city_count,
						width: 50,
						height: 50,
						options: {
							labelName: type == 1 ? item.province : item.city
						},
						customCallout: {
							anchorX: 0,
							anchorY: 60,
							display: "ALWAYS"
						},
						iconPath: this.getImgSrc('/uploads/20241229/17354367596770a9d7b6da3.png')
					})
				})
				return list
			},
			getYear(data) {
				const inputDate = new Date(data);
				const currentDate = new Date();
				const yearDiff = currentDate.getFullYear() - inputDate.getFullYear();
				const currentMonth = currentDate.getMonth();
				const currentDay = currentDate.getDate();
				const inputMonth = inputDate.getMonth();
				const inputDay = inputDate.getDate();
				const year = yearDiff + 1
				return year
			},
			changePre() {
				clearTimeout(debounceTimeout);
				debounceTimeout = setTimeout(() => {
					this.isMove = false
					if (this.current == 0) return
					this.current--
					this.detail = this.markers[this.current]
					this.selectMarker(this.current)
					this.tab_list = [{
								show: false,
								name: '距离',
								act: ''
							},
							{
								show: false,
								name: '工艺',
								act: ''
							},
							{
								show: false,
								name: '地区',
								act: '',
							}
						],
						this.screen_index = [-1, 0, -1]
				}, 50)
			},
			changeCrad(e) {
				clearTimeout(debounceTimeout);
				debounceTimeout = setTimeout(async () => {
					this.isMove = false
					let length = this.other_markers.length
					if (e.detail.current == length - 1) {
						this.page++
						this.current = e.detail.current
						await this.getList()
						this.selectMarker(this.current)
					}
					if (this.current < length) {
						this.current = e.detail.current
						this.detail = this.markers[this.current]
						this.selectMarker(this.current)
					}
					this.setMapDetail(this.markers[this.current].id)
				}, 500)
			},
			async changeNext() {
				clearTimeout(debounceTimeout);
				let length = this.markers.length
				if (this.current == length - 1) {
					this.page++
					this.current++
					await this.getList()
				}
				if (this.current < length) {
					this.current++
					this.detail = this.markers[this.current]
				}
				debounceTimeout = setTimeout(async () => {
					this.isMove = false
					this.selectMarker(this.current)
					this.tab_list = [{
								show: false,
								name: '距离',
								act: ''
							},
							{
								show: false,
								name: '工艺',
								act: ''
							},
							{
								show: false,
								name: '地区',
								act: '',
							}
						],
						this.screen_index = [-1, 0, -1]
				}, 50)
			},
			hasProducts(products) {
				return products && products.length !== 0
			},
			markertap(e) {
				const markerId = e.detail.markerId
				let index = this.markers.findIndex(item => item.id == markerId)
				this.page = 1
				this.latitude = this.other_markers[index].latitude
				this.longitude = this.other_markers[index].longitude
				this.markers = []
				this.current = 0

				this.isclick = true

				this.getList()

				setTimeout(() => {
					this.isclick = false
				}, 3000)
				// this.getList(this.other_markers[index].longitude)
				// setTimeout(()=>{
				// 	this.markers = []
				// },50)

				// this.setMapDetail(markerId)

				// let index = this.markers.findIndex(item => item.id == markerId)
				// if (index == -1) return
				// this.selectMarker(index)
				// this.current = index
				// this.detail = this.markers[this.current]
			},
			setMapDetail(id) {
				this.markers.forEach(item => {
					item.options.isSelect = false
					if (item.id == id) {
						item.options.isSelect = true
					}
				})
				let index = this.markers.findIndex(item => item.id == id)
				if (index == -1) return
				// if(this.page==1){
				// this.selectMarker(index)
				// }
				// this.markerId = id
				this.current = index
				let list = this.markers.filter(item => item.width == 35)
				list.forEach((item, index1) => {
					item.iconPath = this.map_icon
					item.width = this.map_scale_watch <= 8 ? 25 : 30
					item.height = this.map_scale_watch <= 8 ? 25 : 30
					item.zIndex = 1
				})
				this.markers[index].width = 35
				this.markers[index].height = 35
				this.markers[index].iconPath = this.current_map_icon
				this.markers[index].showLabel = true
				this.markers[index].zIndex = 999
				this.detail = this.markers[index]
			},
			selectMarker(index) {
				const {
					longitude,
					latitude,
					id
				} = this.markers[index]
				// this.markerId = id

				this.moveMarkerToCenter({
					longitude,
					latitude
				})
			},
			moveMarkerToCenter(marker) {
				this.longitude = "";
				this.latitude = "";
				setTimeout(() => {
					this.longitude = marker.longitude;
					this.latitude = marker.latitude;
					this.map_scale = 17;
				}, 50)

			},
			regionchange(e) {
				clearTimeout(debounceTimeout);
				debounceTimeout = setTimeout(() => {
					let {
						scale,
						type,
						causedBy,
						centerLocation
					} = e.detail;
					if (type === 'end') {
						this.map_scale_watch = scale
						if (e.causedBy == "drag" && !this.isclick) {
							this.is_simple = false;
							this.markers = []
							this.loading = true
							this.current = 0
							this.getList(centerLocation.longitude, centerLocation.latitude)
						}
					}
					if (!this.is_onLoad && e.causedBy == "drag") {
						this.isMove = true
						this.longitude = centerLocation.longitude
						this.latitude = centerLocation.latitude
					}
				}, 400)
			},
			getList(longitude, latitude) {
				let params = {
					id: this.pre_id,
					page: longitude ? 1 : this.page,
					pageSize: 10,
					longitude: longitude ? longitude : this.longitude,
					latitude: latitude ? latitude : this.latitude,
					my_longitude: this.my_longitude,
					my_latitude: this.my_latitude,
					keyword: "",
					distance: this.tab_list[0].act ? this.tab_list[0].act : 0,
					machining: this.tab_list[1].act,
					service_industry: 0,
					province: longitude ? '' : this.region[0].name ? this.region[0].name : '',
					city: longitude ? '' : this.region[1].name ? this.region[1].name : '',
					type: 1
				}
				if (this.map_range == 200) {
					params.proportion = 1
					// params.distance=500	
				}
				if (this.map_range == 500) {
					params.proportion = 2
				}
				if (!this.pre_id) {
					delete params.id
				}
				if (longitude) {
					delete params.page
					delete params.pageSize
				}
				this.loading = true
				return http.request('user_settled/list', params).then(res => {
					setTimeout(() => {
						this.loading = false
					}, 50)
					let data = res.data
					this.total_all = data.total
					this.showLength = data.data.length
					if (this.pre_id) {
						this.pre_id = ""
						this.getList()
					}

					if (data.data.length != 0) {
						data.data.forEach((item, i) => {
							item.machining = item.machining.join('、')
							item.service_industry = item.service_industry.join('、')
							item.machining_products.forEach(el => {
								if (el.url.startsWith('[')) {
									try {
										el.url = JSON.parse(el.url);
									} catch (e) {
										el.url = null;
									}
								}
							});
							item.unit = "公里"
							item.unit1 = "公里"
							const updateDistanceValue = (distance, unitSetter) => {
								if (isNaN(distance)) {
									return 0;
								}
								if (distance >= 100) {
									return Math.floor(distance);
								} else if (distance >= 1) {
									return distance.toFixed(2);
								} else {
									item[unitSetter] = "米";
									return Math.floor(distance * 1000);
								}
							}
							const distance = parseFloat(item.distance_in_km);
							const distance1 = parseFloat(item.distance_in_km1);
							item.distance_in_km = updateDistanceValue(distance, 'unit');
							item.distance_in_km1 = updateDistanceValue(distance1, 'unit1');

							const icon = i === 0 ? this.current_map_icon : this.map_icon
							const size = i === 0 ? 35 : 25

							const is_svip = item.grade === 2 && item.grade_type === 1

							let is_show = this.tab_list[0].act != '' && this.tab_list[0].act >= 100 ?
								is_svip : true
							if (item.id) {
								this.markers.push({
									iconPath: icon,
									width: size,
									height: size,
									...item,
									options: {
										isStore: false,
										labelName: item.company.slice(0, 6) + '...',
										isSelect: i === 0
									},
									customCallout: {
										anchorX: 0,
										anchorY: 0,
										display: "ALWAYS"
									}, // 常显
									showLabel: true
								})

							}
						})
						this.currentLength = data.data.length
						let map = new Map();
						for (let item of this.markers) {
							if (!map.has(item.id)) {
								map.set(item.id, item);
							};
						};
						this.markers = [...map.values()]
						this.other_markers = this.markers
						this.setMapDetail(this.markers[this.current].id)
						const min = this.markers[0]
						const distance = this.markers[0].distance_in_km1;
						const isMeters = (this.markers[0].unit1 === "米");
						if (this.tab_list[0].act == '' && min.unit1 == '公里' && min.distance_in_km1 > 200) {
							this.markers.forEach(item => {
								item.showLabel = item.grade === 2 && item.grade_type === 1
							})
						}
						setTimeout(() => {
							this.map_scale = this.calculateScale(distance, isMeters) ? this.calculateScale(
								distance, isMeters) : 11
						}, 300)
						if (!longitude) {
							let totalLatitude = Number(this.my_latitude);
							let totalLongitude = Number(this.my_longitude);
							totalLatitude += Number(this.markers[0].latitude);
							totalLongitude += Number(this.markers[0].longitude);
						}
					} else {
						// this.markers = [...this.markers]
					}
					if (this.map_range == 0) {
						this.setMapList(this.markers)
					}
					// console.log(this.map_range, this.mapList)
				})
			},
			objectToArray(obj) {
				let list = []
				for (var i in obj) {
					list.push({
						id: Math.floor(Math.random() * (9999999 - 1000000 + 1)) + 1000000,
						...obj[i],
						width: 50,
						height: 50,
						options: {
							labelName: i
						},
						customCallout: {
							anchorX: 0,
							anchorY: 50,
							display: "ALWAYS"
						},
						iconPath: this.getImgSrc('/uploads/20241112/173139768967330839589d0.png'),
					})
				}
				return list
			},
			//调节地图比例
			calculateScale(distance, isMeters) {
				// this.checkLogin();
				if (isMeters) { // 米
					const meterScales = [{
							threshold: 900,
							scale: 14.2
						},
						{
							threshold: 700,
							scale: 14.5
						},
						{
							threshold: 500,
							scale: 14.8
						},
						{
							threshold: 400,
							scale: 15.2
						},
						{
							threshold: 300,
							scale: 15.6
						},
						{
							threshold: 200,
							scale: 16
						},
						{
							threshold: 150,
							scale: 16.4
						},
						{
							threshold: 100,
							scale: 16.8
						},
						{
							threshold: 50,
							scale: 17.2
						},
						{
							threshold: 0,
							scale: 18
						}
					];

					for (const scaleObj of meterScales) {
						if (distance >= scaleObj.threshold) {
							return scaleObj.scale;
						}
					}
				} else {
					// 公里
					const kmScales = [{
							threshold: 300,
							scale: 4
						},
						{
							threshold: 200,
							scale: 6
						},
						{
							threshold: 150,
							scale: 7
						},
						{
							threshold: 100,
							scale: 7.4
						},
						{
							threshold: 90,
							scale: 7.6
						},
						{
							threshold: 80,
							scale: 8
						},
						{
							threshold: 60,
							scale: 8.2
						},
						{
							threshold: 50,
							scale: 8.6
						},
						{
							threshold: 40,
							scale: 8.8
						},
						{
							threshold: 30,
							scale: 9
						},
						{
							threshold: 25,
							scale: 9.4
						},
						{
							threshold: 20,
							scale: 9.8
						},
						{
							threshold: 18,
							scale: 10
						},
						{
							threshold: 16,
							scale: 10.2
						},
						{
							threshold: 15,
							scale: 10.4
						},
						{
							threshold: 11,
							scale: 10.5
						},
						{
							threshold: 10,
							scale: 10.8
						},
						{
							threshold: 9,
							scale: 11
						},
						{
							threshold: 8,
							scale: 11.2
						},
						{
							threshold: 7,
							scale: 11.4
						},
						{
							threshold: 6,
							scale: 11.6
						},
						{
							threshold: 5,
							scale: 11.8
						},
						{
							threshold: 3,
							scale: 12.2
						},
						{
							threshold: 2,
							scale: 12.7
						},
						{
							threshold: 1,
							scale: 13.4
						},
						{
							threshold: 0,
							scale: 13.8
						}
					];

					for (const scaleObj of kmScales) {
						if (distance >= scaleObj.threshold) {
							return scaleObj.scale;
						}
					}
				}
				return null; // 如没有匹配项，返回 null  
			},
			async getAllInfo() {
				const that = this
				try {
					const res = await uni.getSetting();
					that.isAuth_location = res[1].authSetting['scope.userLocation'];

					if (that.isAuth_location) {

						const location = await that.getLocation();
						if (!uni.getStorageSync('latitude') && !uni.getStorageSync('longitude')) {
							that.latitude = location.latitude;
							that.longitude = location.longitude;
						}
						// const result = await that.getAreas(that.latitude, that.longitude);
						// const {
						// 	province,
						// 	city,
						// 	district
						// } = result.data.result.address_component;
						// that.province = province;
						// that.city = city;

						// that.nav_title = province == city ? city + '-' + district : province + '-' + city
						await that.getList();
					}
				} catch (error) {}
			},
			checkType(data) {
				return Array.isArray(data)
			},
			openSet() {
				uni.openSetting({
					success(res) {},
					fail() {}
				})
			},
			getLocation() {
				return new Promise((resolve, reject) => {
					const that = this;
					uni.getLocation({
						isHighAccuracy: true,
						type: 'gcj02',
						success: (res) => {
							resolve(res);
						},
						fail(res) {
							uni.showToast({
								title: '定位失败：请开启定位',
								icon: 'none'
							});
							reject(res);
						}
					});
				});
			},
			getLocate() {
				this.moveMarkerToCenter({
					longitude: this.my_longitude,
					latitude: this.my_latitude
				})
				this.markers = []
				this.page = 1
				this.current = 0
				this.getList(this.my_longitude, this.my_latitude)
				// uni.showLoading({
				// 	title: '加载中...'
				// })
				// this.getLocation().then(res => {

				// 	const marker = {
				// 		longitude: res.longitude,
				// 		latitude: res.latitude
				// 	}
				// 	this.moveMarkerToCenter(marker)
				// 	uni.hideLoading()
				// })
			},
			// calloutTap(e) {
			// 	const {
			// 		markerId
			// 	} = e.detail;
			// 	const marker = this.markers.find((m) => m.id === markerId);
			// 	marker && this.moveMarkerToCenter(marker);
			// },
			getBase() {
				http.request('user/userInfo').then(res => {
					this.not_join = res.data.userInfo.grade === 0
				})
				http.request('base/configData').then((res) => {
					const machiningData = res.data.machining || [];
					res.data.machiningre = [{
						id: 0,
						name: '全部',
						children: []
					}, ...machiningData];
					res.data.machiningre.forEach(item => {
						item.children.unshift({
							name: "全部",
							id: item.id,
							machining_type: 0
						});
					});
					this.info = res.data
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
			},
			ontabShow(index) {
				this.screen_popup = true
				this.tab_list.forEach((item, i) => {
					item.act = (index === i) ? i : '';
					item.show = (index === i);
				});
			},
			closePopup() {
				this.screen_popup = false
				this.tab_list.forEach((item, i) => {
					// item.act = '';
					item.show = false;
				});
			},
			changeTab(index, id, name) {
				// this.onTab(id,name)
				// let act = this.act;
				let status = false
				this.setData({
					[`screen_index[1]`]: index,
					[`tab_list[${1}].name`]: name == '全部' ? '工艺' : name,
					[`tab_list[${1}].act`]: id,
					// [`tab_list[${1}].show`]:status,
					// screen_popup:status
					list: [],
					page: 1,
					markers: []
				});
				setTimeout(() => {
					this.current = 0
					this.getList();
					this.getIp(11, name)
					this.closePopup()
				}, 50)
				// this.onClose();
			},
			ontabSel(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				let index = e.currentTarget.dataset.i;
				this.tab_list.forEach((item, i) => {
					item.act = (index === i) ? i : '';
					item.show = (index === i);
				});
				this.page = 1
				this.ma = []
				this.markers = []
				this.current = 0
				this.getList()
				// this.getIp(11,name)
			},
			onRegion(e, _dataset) {
				/* ---处理dataset begin--- */
				// this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				let name = e.currentTarget.dataset.name;
				let id = e.currentTarget.dataset.id;
				let type = e.currentTarget.dataset.type;

				this.setData({
					[`region[${type}].name`]: name,
					[`region[${type}].act`]: id
				});
				if (type == 0) {
					this.getRegion(id);
				} else if (type == 1) {
					this.setData({
						page: 1,
						list: [],
						[`tab_list[2].name`]: name === '全部' ? '地区' : name
					});
					this.markers = []
					this.current = 0
					this.getList();
					this.getIp(11, name)
					setTimeout(() => {
						this.closePopup()
					}, 50)
				}
			},
			changeScreen(i, index) {
				if (this.screen_index[i] === index) {
					this.$set(this.screen_index, i, -1);
				} else {
					this.$set(this.screen_index, i, index);
				}
				const name = this.position_screen[index]
				this.setData({
					[`tab_list[${i}].show`]: false,
					[`tab_list[${i}].name`]: name === 0 ? '附近' : name + '公里',
					[`tab_list[${i}].act`]: name
				})
				this.screen_popup = false
				this.markers = []
				this.current = 0
				this.getList();
				this.getIp(11, name)
			},
			goBack() {
				uni.navigateBack({
					delete: 1,
					fail(err) {
						uni.redirectTo({
							url: '/pages/shopping/shopping'
						})
					}
				})
			},
			getIp(type, name) {
				http.request('demand/getIp', {
					type: type,
					id: 0,
					text: name
				}).then(res => {})
			},
			getRegion(id) {
				const data = {
					pid: id
				};
				http.request('base/region', data).then((res) => {
					if (id === 1) {
						this.setData({
							province_list: res.data
						});
					} else {
						this.setData({
							city_list: res.data
						});
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
				});
			},
			getAreas(latitude, longitude) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: "https://apis.map.qq.com/ws/geocoder/v1/?location=",
						data: {
							key: "XUDBZ-3OVAL-KWEPB-MXU6W-KW4XK-6WBHF",
							location: `${latitude},${longitude}`
						},
						success(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
			getArea(latitude, longitude) {
				const that = this
				uni.request({
					url: "https://apis.map.qq.com/ws/geocoder/v1/?location=",
					data: {
						key: "XUDBZ-3OVAL-KWEPB-MXU6W-KW4XK-6WBHF",
						location: `${latitude},${longitude}`
					},
					success: (res) => {
						const {
							province,
							city,
							district
						} = res.data.result.address_component
						that.province_text = province
						that.nav_title = province == city ? city + '-' + district : province + '-' + city
						// that.nav_title = res.data.result.address_reference.address_component
						// that.province = 
					},
					fail: (err) => {
						uni.showToast({
							title: '获取详细地址失败，请开启定位',
							icon: 'none'
						});
					}
				});
			},
			goList() {
				uni.redirectTo({
					url: '/pages/shopping/shopping'
				})
			},
			goPage(path, id) {
				if (!path) return
				if (path === '/subPack/factoryDetails/factoryDetails') {
					uni.setStorageSync('factoryLocal', JSON.stringify({
						lat: this.latitude,
						lng: this.longitude
					}))
				}
				if (path === '/subPack/factoryMap/factoryMap') {
					uni.navigateTo({
						url: `${path}?latitude=${this.latitude}&longitude=${this.longitude}`
					})
					return
				}
				uni.navigateTo({
					url: id ? `${path}?id=${id}` : path
				})
			},
			checkLogin() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: '您还未登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 0)
				}
			},
		}
	}
</script>

<style lang="scss">
	.region_loading {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0rpx;
		left: 0;
		z-index: 9999
	}

	.rl_box {
		// width: 60rpx;
		// height:60rpx;
		position: absolute;
		margin-top: -60rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.7);
		z-index: 9999;
	}

	.factory_position {
		position: absolute;
		top: 300rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.factory_entry {
		background: #1050c7;
		color: #fbfbfd;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		align-items: center;
		width: 130rpx;
		height: 130rpx;
		justify-content: center;
		border-radius: 50%;
		overflow: hidden;
		transform: scale(0.7)
	}

	.change-map {
		background: #1050c7;
		color: #fbfbfd;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
	}

	.factory_title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#myMap {
		width: 100vw;
		height: 100vh;
	}

	.post {
		position: sticky;
		z-index: 2;
	}

	.tabListName {
		overflow: hidden;
		/*   超出容器的部分影响  */
		white-space: nowrap;
		/*  文本不换行   */
		text-overflow: ellipsis;
		/*  超出容器的文本显示省略号  */
	}

	.position_screen {
		padding: 20rpx 20rpx 40rpx;
	}

	.position_list {
		flex-wrap: wrap;
	}

	.position_item {
		height: 65rpx;
		padding: 5rpx 20rpx;
		border-radius: 35rpx;
		/* line-height:65rpx; */
		text-align: center;
		background: #F5F6F5;
		font-size: 26rpx;
		/* box-sizing:border-box; */
		color: #000;
		margin-right: 15rpx;
	}

	.position_item_active {
		background: #BCC9EC !important;
		color: #4874CB !important;
	}

	.tab-left {
		padding-left: 40rpx;
		line-height: 96rpx;
		font-size: 28rpx;
		color: #6b758c;
		display: block;
	}

	.factory_map_area {
		position: absolute;
		left: 0rpx;
		width: 100%;
		height: auto;
		// padding: 30rpx 30rpx 10rpx;
		box-sizing: border-box;
		margin-bottom: 10rpx;

		/deep/ .avatar-class {
			width: 30%;
			height: 260rpx;
		}
	}

	.locate_box {
		position: absolute;
		top: -140rpx;
		left: 30rpx;
		background: #fff;
		padding: 10rpx 20rpx;
		border-radius: 15rpx;
	}

	.factory_box {
		background-color: #FFF;
		padding: 20rpx;
		/* margin-top: 20rpx; */
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.factory_year {
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
		font-size: 22rpx;
		text-align: center;
	}

	.factory_img {
		width: 30%;
		height: 260rpx;
		position: relative;
		background-color: #EBEBEB;
		border-radius: 15rpx;
	}

	.factory_img image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.factory_content {
		width: 68%;
		// height: 290rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.factory_content_name {
		width: 85rpx;
		color: gray;
	}

	.factory_content_text {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.factory_img_item {
		width: 150rpx;
		height: calc(150rpx * 0.66);
		/* height: 120rpx; */
	}

	.factory_img_item image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;

	}

	.unAuth_box {
		width: 100%;
		position: relative;
	}

	.unAuth_box image {
		width: 100%;
	}

	.unAuth_info {
		position: absolute;
		color: #fff;
		text-align: center;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.openSet {
		width: 180rpx;
		padding: 0 20rpx;
		margin: 60rpx auto 100rpx;
		height: 60rpx;
		background: #1050c7;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFangSC-Medium;
		text-align: center;
		color: #FFF;
		line-height: 60rpx;
	}

	cover-view {
		// overflow: visible !important;
	}

	.marker-box-texts {
		color: #0F50C6;
		padding: 10rpx 0rpx;
		box-sizing: content-box;
		width: 205rpx;
		text-align: center;
		// height: 50rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		background-color: #fff;
		// white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
		border: 1px solid gainsboro;
		font-family: PingFangSC, PingFangSC-Medium;
	}

	.marker-box-text-active {
		background-color: #0F50C6 !important;
		border: 1px solid #0F50C6 !important;
		color: #fff !important;
	}

	.customCallout {
		width: auto;
		height: 74rpx;
		padding: 1rpx;
		position: relative;
		transform: translateY(6rpx);

		// position: relative; width: 100%;
		&::after,
		&::before {
			content: "";
			position: absolute;
			z-index: 1;
			left: 50%;
			bottom: -6rpx;
			display: block;
			transform: translateX(-50%);
			font-size: 0;
			line-height: 0;
			border-color: gainsboro transparent transparent;
			border-style: solid;
			border-width: 8px;
			border-radius: 5rpx;
			z-index: -1;
		}

		&::after {
			bottom: -5rpx;
			z-index: 9;
			border-color: white transparent transparent;
		}
	}

	.customCallout_active {

		&::after,
		&::before {
			border-color: #0F50C6 transparent transparent !important;
		}
	}

	.page_turning_box {
		position: absolute;
		right: 12rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		justify-content: center;
		z-index: 9;
	}

	.page_turning_box_left {
		position: absolute;
		left: 12rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 60rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		justify-content: center;
		z-index: 9;
	}

	.unLocation {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
		}
	}

	.unAuth_info {
		position: absolute;
		color: #fff;
		text-align: center;
		width: 100%;
		top: 50%;
		left: 50%;
		z-index: 999;
		transform: translate(-50%, -50%);
	}

	.is_simple {
		color: #fff;
		// background:#fff;
		width: 160rpx;
		// height: 100rpx;
		// border-radius: 50%;
		// transform: translateY(150rpx);
	}

	.swiperBox {
		width: 100%;
	}

	.manpCenter {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		margin-top: -30rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
	}

	.fa_emity {
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		min-height: 300rpx;
		line-height: 300rpx;
		background: #fff;
		color: gray;
		border-radius: 20rpx;
	}

	.skeleton {
		border-radius: 20rpx;
		background: #fff;
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.skeleton_left {
			width: 30%;
			height: 260rpx;
			background: #EFEFEF;
			border-radius: 15rpx;
			animation: opacityBg 1s ease-in-out infinite;
		}

		.skeleton_right {
			width: 68%;
			animation: opacityBg 1s ease-in-out infinite;
		}

		.skeleton_title {
			width: 100%;
			height: 40rpx;
			background: #EFEFEF;
		}

		.skeleton_content1 {
			width: 60%;
			height: 35rpx;
			background: #EFEFEF;
			margin-top: 20rpx;
		}

		.skeleton_content2 {
			width: 70%;
			height: 35rpx;
			background: #EFEFEF;
			margin-top: 20rpx;
		}

		.skeleton_content3 {
			width: 100%;
			height: 80rpx;
			background: #EFEFEF;
			margin-top: 20rpx;
		}

		.skeleton_products_item {
			width: 150rpx;
			height: calc(150rpx * 0.66);
			background: #EFEFEF;
			animation: opacityBg 1s ease-in-out infinite;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}

	@keyframes opacityBg {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.8;
		}

		100% {
			opacity: 1;
		}
	}
</style>